<template>
	<page-meta :page-style="noSlide?'overflow: hidden;' : 'overflow: auto;'" style="display: block;">
		<view class="top-fixed">
			<view class="acea-row row-middle row-between rent-tit">
				<!-- <view class="text line1" v-if="type=='rentOut'">{{leaseInfo}}</view> v-if="type=='rentAsk'" -->
				<view class="text line1 nav-bg">
					<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
						:scroll-left="tabLeft" show-scrollbar="true">
						<view class="item dsitem" :style='"width:"+isWidth+"px"' :data-index="index"
							:class="index===categoryOn?'item-on':''" v-for="(item,index) in navList" :key="item.id"
							:id="'id'+index" @click="cataTabClick(index,item)">{{ item.name }}</view>
					</scroll-view>

				</view>
				<view class="acea-row row-middle">
					<view class="icon" @click="toAddLease">
						<image src='https://image.shanghepu.com/cdn/images/addmatch.png' mode="avatar"></image>
					</view>
					<!-- 			<view class="icon">  
						<image src="@/static/images/lease_search.png" mode=""></image>
					</view> -->
				</view>
			</view>
			<view class="acea-row row-middle row-between filtration">
				<view class="acea-row row-middle filteration-l">
					<view :class="[filterOn==index?'filteration-l-on':'']" v-for="(item,index) in filterList"
						@click="filterClick(index)">{{item}}</view>
				</view>
				<view class="acea-row row-middle filtration-r">
					<view class="acea-row row-middle filtration-r-btn" @click="itemClick(0)">
						<view style="font-size: 32rpx;">区域</view>
						<u-icon name="arrow-down" size="16"></u-icon>
					</view>
					<view class="acea-row row-middle filtration-r-btn">
						<!-- 		<view class="text line1">筛选</view>
						<view class="sanjiao"></view> -->
						<zdyFilter :categories="categories" @confirm="confirmFilterMeth" height="90%"
							@openFilter="noSlide = true" @closeFilter="noSlide = false"></zdyFilter>
					</view>
				</view>
			</view>
			<!-- 区域 -->
			<view class="dropdown-box acea-box" :style="{'opacity':show?'1':'0','display':show?'block':'none'}"
				v-if="currentIndex==0">
				<view class="aside">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="dropdown-item" v-for="(item,index) in aceaArr" :key="index"
							:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':(currentAceaAsideIndex==index)?activeColor:itemTextColor}"
							@tap.stop="currentAceaAsideIndex=index">{{item.type}}</view>
					</scroll-view>
				</view>
				<view class="conter">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="dropdown-item"
							:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':(currentAceaConterIndex==index)?activeColor:itemTextColor}"
							v-for="(item,index) in aceaConterArr[currentAceaAsideIndex]" :key="index"
							@click="wocaonima(item)" @tap.stop="currentAceaConterIndex=index">{{item.regionName}}</view>
					</scroll-view>
				</view>
				<view class="acea-row row-middle row-between acea-btn" v-if="false">
					<!-- <view class="reset" @tap.top="aceaReset()">重置</view> -->
					<!-- <view class="confirm" @tap.top="aceaConfirm()">确认</view> -->
				</view>
			</view>

			<!-- 筛选 -->
			<view class="filtrate-box"
				:style="{backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}"
				v-if="currentIndex==1&&filtrateShow">
				<view class="aside">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="dropdown-item" v-for="(item,index) in filtrateArr" :key="index"
							:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+4+'rpx','color':(currentFiltrateAsideIndex==index)?activeColor:itemTextColor}"
							@tap.stop="currentFiltrateAsideIndex=index">{{item.type}}</view>
					</scroll-view>
				</view>
				<view class="conter">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="conter-title"
							:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+4+'rpx'}">
							{{filtrateArr[currentFiltrateAsideIndex].type}}
						</view>
						<view :class="['dropdown-item',currentFiltrateConterIndex==index?'on':'']"
							:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+'rpx','color':(currentFiltrateConterIndex==index)?activeColor:itemTextColor}"
							v-for="(item,index) in filtrateConterArr[currentFiltrateAsideIndex]" :key="index"
							@tap.stop="currentFiltrateConterIndex=index">{{item}}</view>
					</scroll-view>
				</view>
				<view class="acea-row row-middle row-between filtrate-btn">
					<view class="reset" @tap.top="filtrateReset()">重置</view>
					<view class="confirm" @tap.top="filtrateConfirm()">确认</view>
				</view>
			</view>
		</view>
		<!-- 求租 -->
		<view class="list rent-ask" v-if="type=='rentAsk'">
			<view class="item">
				<view class="acea-row row-middle row-between top-info">
					<view>3天内更新</view>
				</view>
				<view class="close">×</view>
				<view class="acea-row row-middle row-between sell-goods">
					<view class="goods-img">
						<image src="" mode="" class="img"></image>
						<view class="tag line1">
							好铺优选
						</view>
						<view class="acea-row row-middle distance">
							<image src="@/static/images/location.png" mode=""></image>
							<text>距您1.4km</text>
						</view>
					</view>
					<view class="acea-row row-column-between goods-info">
						<view class="title line1">
							出售丨 自用餐桌椅 丨10套
						</view>
						<view class="acea-row row-middle">
							<view class="sell-price">
								<text>1200</text>元/月
							</view>
							<view class="transfer-price">转让费: <text>10万</text></view>
						</view>
						<!-- <view class="gold-coin">
							<image src="@/static/images/goldcoin_icon.png" mode=""></image>
							<view class="num">25800</view>
						</view> -->
						<view class="acea-row goods-tag">
							<view class="tag-tit">
								优势：
							</view>
							<view class="tag">关键词1</view>
							<view class="tag">关键词2</view>
							<view class="tag">7年老店</view>
							<view class="tag">关键词2</view>
							<view class="tag">关键词2</view>
						</view>
					</view>
				</view>
				<!-- 适合场所 -->
				<view class="suitable-box">
					<!-- <text>优势：</text> -->
					<text class="suitable">酒吧</text>
					<text class="suitable">KTV</text>
					<text class="suitable">休闲娱乐</text>
					<text class="suitable">酒吧</text>
					<text class="suitable">休闲娱乐</text>
				</view>
				<view class="acea-row row-middle row-between visit-box">
					<view class="visit-advtar-box">
						<view class="visit-advtar" @click="toVisitor(item)">
							<image :src="m.avatar" mode=""
								v-for="(m,ind) in item.managementResponse?item.managementResponse:[]" :key="ind"
								:style="{left: (20 * ind) + 'rpx'}"></image>
						</view>
						<view class="visit-num">{{item.view ||  0}}人浏览 已成功匹配{{item.matchingNum?item.matchingNum:0}}人
						</view>
					</view>

					<view class="visit-l">
						<view class="visit-num">{{item.communication || 0}}人咨询</view>
						<view class="visit-btn" @click="toConcat(item.contacts)">
							立即咨询
						</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 出租 -->
		<view class="list rent-out" v-if="type=='rentOut'">
			<view class="item" v-for="(item,idx) in listData" :key="idx">
				<block v-if="item.type == 5">
					<recruit :list="[item]"></recruit>
				</block>
				<block v-else-if="item.type == 6">
					<job :list="[item]"></job>
				</block>
				<block v-else-if="item.type == 7 || item.type == 8">
					<merService :list="[item]"></merService>
				</block>
				<block v-else-if="item.type == 9">
					<sypply-service :list="[item]"></sypply-service>
				</block>
				<block v-else-if="item.type == 10">
					<askSupply :list="[item]" />
				</block>
				<block v-else-if="item.type == 11">
					<unused :list="[item]" />
				</block>
				<block v-else-if="item.type == 12">
					<askUnused :list="[item]" />
				</block>
				<beCurrent :item="item" :isTozx="true" :isMatch="true" v-else />
			</view>
		</view>

		<view class='loadingicon acea-row row-center row-middle' @click="loadMore">
			<text class='loading iconfont icon-jiazai' :hidden='loading'></text>{{loadTitle}}
		</view>
		<view class="uni-p-b-98"></view>
		<view class="bg-mask" :class="[show?'bg-mask-show':'']" @tap="maskClose" @touchmove="touchControl"></view>
	</page-meta>
</template>

<script>
	import {
		toPage,
		showLoading
	} from '@/filters/commFilter.js'
	import * as t from '@/api/template.js'
	import {
		getDateM1, //求组
		getDateM2, //出租
		getDateM3, //出售装让
		getDateM4, //求购
		DateMatch, //匹配通用
	} from '@/api/template.js'
	import {
		getAreaApi
	} from '@/api/service.js'
	import beCurrent from '@/components/listItems/beCurrent.vue'
	import job from '@/pages/others/components/listItems/job.vue'
	import recruit from '@/components/listItems/recruit.vue'
	import merService from '@/components/listItems/merService.vue'
	import zdyFilter from '@/pages/others/components/zdyFilter/index.vue'
	import dropdownFilter from '@/pages/others/components/dropdownFilter/index.vue'
	import sypplyService from '@/components/listItems/sypplyService.vue'
	import askSupply from '@/components/listItems/askSupply.vue'
	import unused from '@/components/listItems/unused.vue'
	import askUnused from '@/pages/others/components/listItems/askUnused.vue'
	export default {
		components: {
			beCurrent,
			zdyFilter,
			dropdownFilter,
			job,
			recruit,
			merService,
			sypplyService,
			askSupply,
			unused,
			askUnused
		},
		props: {
			refsh: {
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				currentIndex: '',
				tabLeft: 0,
				isWidth: 185,
				itemHeight: 88,
				itemPadding: 24,
				itemFontSize: 28,
				noSlide: false,
				bgcolor: '#fff',
				activeColor: '#ee212d',
				itemTextColor: '#666',
				barTextColor: '#383838',
				categoryOn: 0,
				// 区域
				currentAceaAsideIndex: 0,
				currentAceaConterIndex: 0,
				// 筛选
				currentFiltrateAsideIndex: 0,
				currentFiltrateConterIndex: 0,
				show: false,
				filtrateShow: false,
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				leaseInfo: '出租600平米培训机构',
				type: 'rentOut', //rentOut  出租   rentAsk  求租
				filterList: ['推荐', '附近', '最新'],
				lar: ['区域'],
				larKey: ['district'],
				filterOn: 0,
				addImgSrc: this.$imagesCdn,
				search: {},
				categories: [{
						name: '面积',
						type: 'split',
						splitAttr: 'value',
						splitKey: 'areaRange',
						splitKeys: 'areaRanges',
						subCategories: [{
								name: '不限',
								value: ''
							}, {
								name: '20-50㎡',
								value: '20-50'
							},
							{
								name: '50-100㎡',
								value: '50-100'
							},
							{
								name: '100-150㎡',
								value: '100-150'
							},
							{
								name: '200-300㎡',
								value: '200-300'
							},
							{
								name: '300-500㎡',
								value: '300-500'
							},
							{
								name: '500㎡以上',
								value: '500-1000'
							}
						]
					},
					{
						name: '价格',
						type: 'split',
						splitAttr: 'value',
						splitKey: 'rentRange',
						splitKeys: 'rentRanges',
						subCategories: [{
								name: '不限',
								value: ''
							},
							{
								name: '0-500',
								value: '0-500'
							},
							{
								name: '500-1000',
								value: '500-1000'
							},
							{
								name: '1000-1500',
								value: '1000-1500'
							},
							{
								name: '2000-2500',
								value: '2000-2500'
							},
							{
								name: '2500-3000',
								value: '2500-3000',
							},
							{
								name: '3000以上',
								value: '3000-100000'
							}
						]
					}
				],
				isToAddLease: false,
				// 区域数组
				aceaArr: [{
					type: '区域',
					list: []
				}],
				aceaConterArr: [
					['岳麓区', '天心区', '开福区', '雨花区', '雨花区', '雨花区', '雨花区', '雨花区', '雨花区', '雨花区']
				],
				// 筛选数组
				filtrateArr: [{
						type: '地铁',
						list: ['1号线', '2号线']
					},
					{
						type: '区域',
						list: ['岳麓区', '天心区', '开福区', '雨花区']
					}
				],
				filtrateConterArr: [
					['1号线', '2号线', '3号线', '4号线', '5号线', '6号线', '7号线', '2号线', '2号线'],
					['岳麓区', '天心区', '开福区', '雨花区', '雨花区', '雨花区', '雨花区', '雨花区雨花区雨花区雨花区雨花区雨花区雨花区', '雨花区', '雨花区']
				],
				navList: [],
				page: 1,
				totalPage: 1,
				listData: [],
				loadTitle: '暂无数据',
				loading: true,
				isToTemplate: false,
				filedsData: [],
				categoryArr: [
					[{
						text: '全部',
						value: 1,
					}, ],
					[{
							text: '找服务',
							value: 1,
						},
						{
							text: '供应服务',
							value: 0
						}
					],
					[],
					[{

					}],
					[{
						text: '默认排序',
						value: ''
					}, {
						text: '最新发布',
						value: 0
					}, {
						text: '单价从高到低',
						value: 1
					}, {
						text: '单价从低到搞',
						value: 2
					}]
				],
				tags: [],
				sxx: {
					'0': { //推荐
						sort: '0'
					},
					'1': { //附近
						sort: '1'
					},
					"2": { //最xin1
						sort: '2'
					}
				},
				addCurData: {}
			};
		},
		created() {},
		mounted() {
			this.getNavData();
			// console.log('refsh', this.refsh)
			uni.$on('initMatchLease', data => {
				// this.navList.length > 0 ? (this.navList.unshift(data.data)) : (this.navList.push(data.data));
				// this.navList.length > 0 ? (this.navList.unshift(data.sd)) : (this.navList.push(data.sd));
				// this.tags.length > 0 ? (this.tags.unshift(data.tag)) : (this.tags.push(data.tag));
				// this.filedsData.length > 0 ? (this.filedsData.unshift(data.data)) : (this.filedsData.push(data
				// 	.data));
				this.isToTemplate = true;
				this.addCurData = data.data
				this.saveTemp(data.data)
			})
			uni.$on('refshLease', data => {
				this.addCurData = {}
				this.getNavData(true);
			})
			// showLoading()
			// this.getNavData()
			this.getArea();

		},
		watch: {
			refsh(newVal, oldVal) {
				console.log('no', newVal, oldVal)
				if (this.isToAddLease) {
					// showLoading()
					// this.getNavData()
					// this.isToAddLease = false;
				}
			}
		},

		onReachBottom() {
			// if (this.page >= this.totalPage) return
			this.page += 1;
			this.loading = false
			// this.getList(this.navList[this.categoryOn])
			this.getDataMeth()
		},
		methods: {
			toPage,
			saveTemp(data) {
				t.UserMatchAddApi(data).then(res => {
					this.getNavData();
				})
			},
			loadMore() {
				this.page += 1;
				this.getDataMeth()
			},
			wocaonima(item) {
				this.search['district'] = item.regionId
				this.getDataMeth();
				this.maskClose()
			},
			getArea() {
				getAreaApi({
					city: this.$city,
				}).then(res => {
					this.aceaConterArr[0] = res.data;
					this.aceaConterArr[0].unshift({
						regionId: '',
						regionName: '全部'
					})
				})
			},
			async getDataMeth() {
				this.loadTitle = ""

				if (this.page == 1) {
					this.listData = []
				}
				if (this.navList.length < 1) {
					this.listData = [];
					this.loadTitle = "请先添加匹配模板"
					return;
				}
				this.loading = false
				// let tag = this.tags[this.categoryOn];
				let res = null;

				console.log("this.navList[this.categoryOn].city", this.navList[this.categoryOn])

				let parmas = {
					page: this.page,
					limit: 10,
					screening: {
						...this.search,
						// city: this.navList[this.categoryOn].city
					},
					userMatch: {
						sort: this.sxx[this.filterOn].sort,
						appKey: 'xcx',
						...this.navList[this.categoryOn],
						longitude: this.$location.longitude,
						latitude: this.$location.latitude
					}

				};
				console.log('parmas', parmas)
				res = await DateMatch(parmas);
				this.loading = true
				res && res.data.list.forEach(item => {
					if (item.askrentId) {
						item.status = 3
					} else if (item.buystoreId) {
						item.status = 4;
					}

				})
				if (res.code == 200) {
					this.listData = [...this.listData, ...res.data.list];
					if (!res.data.list || res.data.list.length < 1) {
						if (this.page == 1) {
							this.loadTitle = "暂未获取到数据"
						} else {
							this.loadTitle = "暂无更多"
						}
					} else {
						this.loadTitle = "加载更多"
					}
				} else {
					this.$util.Tips({
						title: '匹配失败'
					})
				}
			},
			kmUnit(m) {
				m = Number(m)
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m > 10000) {
						m = 0;
					}
					if (m >= 1) {
						v = m.toFixed(2) + 'km'
					} else {
						v = (m * 1000).toFixed(2) + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			async getNavData(isRefsh) {
				try {
					let {
						data
					} = await t.UserMatchlistApi();

					if (data.list.length < 1 && !isRefsh) {
						this.toAddLease();
						return;
					}


					this.navList = data.list.map(item => {
						let o = {}
						for (let k in item) {
							if (item[k]) {
								o[k] = item[k]
							}
						}
						return o
					});
					if (this.isToTemplate && this.addCurData.name) {
						this.categoryOn = this.navList.findIndex(item => item.name == this.addCurData.name);
						this.tabLeft = this.categoryOn * this.isWidth //设置下划线位置
					} else {
						this.categoryOn = 0
						this.tabLeft = 0
					}
					this.filterOn = 0
					this.page = 1;

					this.getDataMeth();
					// this.getList(this.navList[0])
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			toAddLease() {
				this.isToAddLease = true;
				toPage('/pages/others/chooseTemplate/chooseTemplate')
			},
			itemClick(index) {
				if (index == 1) this.filtrateShow = true
				if (this.currentIndex == index) {
					this.show = !this.show
				} else {
					this.currentIndex = index
					this.show = true
				}
			},
			filtrateConfirm() {
				// if (this.isNeedChangeTitle) {
				// 	this.updateArr.splice(this.currentIndex, 1, this.aceaConterArr[this.currentFiltrateAsideIndex][this.currentFiltrateConterIndex])
				// }
				this.show = false
			},
			filtrateReset() {
				this.show = false
			},
			confirmFilterMeth(d) {
				this.search = d.params;
				console.log("search", this.search);
				this.getDataMeth();
			},
			finish(d) {
				this.larKey[d.$index] && (this.search[this.larKey[d.$index]] = d.value);
				this.getDataMeth();
			},
			maskClose() {
				// if (!this.maskTouch) return
				this.show = false
			},
			//
			touchControl() {
				if (this.isTouchPrevent) {
					this.maskClose()
				}
			},
			//点击切换需求
			cataTabClick(index, item) {
				// this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				this.categoryOn = index //设置导航点击了哪一个

				this.tabLeft = index * this.isWidth //设置下划线位置
				// this.initData()
				this.getDataMeth()
			},
			//点击切换筛选
			filterClick(index) {
				this.filterOn = index;
				this.page = 1;
				this.getDataMeth()
				// this.initData()
			},
			// initData() {
			// 	this.page = 1;
			// 	this.totalPage = 1;
			// 	this.listData = [];
			// 	this.loading = false
			// 	showLoading()
			// 	this.getList(this.navList[this.categoryOn])

			// },
			// async getList(item) {
			// 	if (!item) {
			// 		uni.hideLoading();
			// 		this.loading = true;
			// 		this.loadTitle = '暂无数据'
			// 		return;
			// 	}
			// 	let params = {
			// 		page: this.page,
			// 		limit: 10,
			// 		...item
			// 	}
			// 	params = this.filterOn == 1 ? {
			// 		...params,
			// 		...this.$location
			// 	} : params
			// 	params = this.dealParams(params)
			// 	let data = {}
			// 	switch (item.dataMatch) {
			// 		case 1:
			// 			data = this.filterOn != 2 ? await t.DateMatchInFoApi(params) : await t.DateMatchNewInFoApi(
			// 				params)
			// 			break;
			// 		case 2:
			// 			data = this.filterOn != 2 ? await t.DateMatchJobApi(params) : await t.DateMatchNewJobApi(
			// 				params);
			// 			break;
			// 		case 3:
			// 			data = this.filterOn != 2 ? await t.DateMatchBuyApi(params) : await t.DateMatchNewBuyApi(
			// 				params);
			// 			break;
			// 		case 4:
			// 			data = this.filterOn != 2 ? await t.DateMatchForServiceApi(params) : await t
			// 				.DateMatchNewForServiceApi(params)
			// 			break;
			// 		case 5:
			// 			data = this.filterOn != 2 ? await t.DateMatchSupplyApi(params) : await t.DateMatchNewSupplyApi(
			// 				params)
			// 			break;
			// 		case 6:
			// 			data = this.filterOn != 2 ? await t.DateMatchRecruitApi(params) : await t
			// 				.DateMatchNewRecruitApi(params)
			// 			break;
			// 		case 7:
			// 			data = this.filterOn != 2 ? await t.DateMatchTransferSaleApi(params) : await t
			// 				.DateMatchNewTransferSaleApi(params)
			// 			break;
			// 		case 8:
			// 			data = this.filterOn != 2 ? await t.DateMatchLetListApi(params) : await t.DateMatchNewLetApi(
			// 				params)
			// 			break;
			// 	}
			// 	if (data.code == 200) {
			// 		this.listData = [...this.listData, ...data.data.list];
			// 		this.totalPage = data.data.totalPage;
			// 		this.loading = true
			// 		if (this.page == data.data.totalPage && this.listData.length > 0) this.loadTitle = '已全部加载'
			// 		else if (this.page < data.data.totalPage && this.listData.length > 0) this.loadTitle = '加载更多'
			// 		else this.loadTitle = '暂无数据'
			// 		uni.hideLoading()
			// 	} else {
			// 		uni.hideLoading()
			// 		uni.showToast({
			// 			icon: 'error',
			// 			title: '获取数据失败'
			// 		})
			// 	}
			// },
			jumpDetail(item) {
				console.log(item)
				switch (this.tags[this.categoryOn].type) {
					case 'jy':
						toPage('/pages/details/askRent/askRent?' + (item.buystoreId ? 'buystoreId=' : 'askrentId=') + (item
							.buystoreId ? item.buystoreId : item.askrentId)) + '&rk=1'
						break;
					case 'qz':
						toPage('/pages/details/shopRent/shopRent?rk=1&id=' + item.id)
						break;
					case 'qg':
						toPage('/pages/details/shopRent/shopRent?rk=1&id=' + item.id)
						break;

				}
			},
			toConcat(contact) {
				if (!contact || contact.length < 1) {
					this.$util.Tips({
						title: '暂未获取到联系人'
					})
					return;
				}

				getApp().globalData.into_singleChatRoom({
					phone: contact[0].contactPhone,
					contactId: contact[0].contactId,
				})
			},
			toVisitor(data) {
				console.log('--', this.dataform)
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=&data=" + JSON.stringify(
						data)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg-mask {
		position: fixed;
		top: 220rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		// z-index: 90;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.bg-mask-show {
		visibility: visible;
		opacity: 1;
	}

	.top-fixed {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 9;
	}

	.rent-tit {

		background: #EE212D;
		padding: 30rpx;

		.text {
			width: calc(100% - 198rpx);
			font-size: 34rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-left: 54rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.nav-bg {
			width: calc(100% - 105rpx);
			height: 65rpx;

			.item {
				position: relative;
				display: inline;
				line-height: 65rpx;
				padding-right: 36rpx;
				white-space: nowrap;
			}

			.item-on {
				font-weight: 700;
				font-size: 40rpx;
			}
		}
	}

	.filtration {
		background: #ffffff;
		padding: 30rpx;

		.filteration-l {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);

			.filteration-l-on {
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(238, 33, 45, 1);
			}

			view {
				margin-right: 36rpx;
			}
		}

		.filtration-r {
			.filtration-r-btn {
				margin-left: 48rpx;

				.text {
					width: 80rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
				}

				.sanjiao {
					width: 0;
					height: 0;
					border: 10rpx solid transparent;
					border-top-color: rgba(128, 128, 128, 1);
					border-bottom-width: 0;
				}
			}
		}
	}

	// 列表
	.list {
		padding: 32rpx;

		.item {
			margin-bottom: 32rpx;
			border-radius: 10rpx;
			background: #ffffff;
			overflow: hidden;

			.top-info {
				margin-bottom: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(191, 186, 186, 1);

				.close {
					font-size: 36rpx;
				}
			}

		}
	}

	// 求租
	.rent-ask {
		.sell-goods {
			.goods-img {
				width: 256rpx;
				height: 216rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				background-color: #cccccc;

				.img {
					width: 100%;
					height: 100%;
				}

				.tag {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: rgba(238, 33, 45, 1);
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.distance {
					width: 100%;
					padding: 12rpx;
					background: rgba(0, 0, 0, .3);
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					image {
						width: 14rpx;
						height: 18rpx;
						margin-right: 12rpx;
					}

					position: absolute;
					bottom: 0;
					left: 0;
				}
			}

			.goods-info {
				width: calc(100% - 268rpx);
				height: 216rpx;

				.title {
					width: 100%;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(56, 56, 56, 1);
				}

				.sell-price {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 36rpx;
						font-weight: 700;
					}
				}

				.transfer-price {
					margin-left: 18rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);

					text {
						font-weight: 700;
					}
				}

				.gold-coin {
					width: 148rpx;
					max-width: 100%;
					padding: 4rpx 12rpx;
					// height: 36rpx;
					border-radius: 20rpx;
					background: rgba(255, 195, 0, 1);
					border: 1px solid rgba(255, 235, 59, 1);
					position: relative;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.num {
						margin-left: 36rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}

				.goods-tag {
					.tag-tit {
						padding: 6rpx 0rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);
					}

					.tag {
						white-space: nowrap;
						border-radius: 4px;
						background: rgba(255, 232, 234, 1);
						padding: 6rpx 8rpx;
						margin-right: 12rpx;
						margin-bottom: 6rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}

					.tag:last-child {
						margin-right: 0;
					}
				}
			}
		}

		// 适合场所

		.suitable-box {
			margin-top: 34rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(82, 104, 139, 1);

			// padding-bottom: 30rpx;
			// border-bottom: 1px solid rgba(238, 238, 238, 1);
			.suitable {
				display: inline-block;
				letter-spacing: 0.4rpx;
				padding: 10rpx;
				border-radius: 4rpx;
				background: rgba(248, 249, 253, 1);
				margin-left: 12rpx;
				white-space: nowrap;
			}
		}

		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar-box {
				width: 70%;

				.visit-num {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-top: 26rpx;
				}

				.visit-advtar {
					width: 100%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}
			}

			.visit-l {
				width: 30%;

				.visit-num {
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-bottom: 12rpx;
				}

				.visit-btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					opacity: 1;
					border-radius: 30rpx;
					background: rgba(238, 33, 45, 1);
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}


		}
	}

	// 出租
	.rent-out {
		.title {
			width: 100%;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 56, 56, 1);
		}

		.goods-tag {
			margin-top: 18rpx;

			.tag {
				white-space: nowrap;
				border-radius: 4px;
				background: rgba(255, 232, 234, 1);
				padding: 6rpx 12rpx;
				margin-right: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}

			.tag:last-child {
				margin-right: 0;
			}
		}

		.contact-info {
			width: 70%;

			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}

			.name {
				width: calc(100% - 100rpx);
				height: 70rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
				margin-left: 24rpx;
			}
		}

		.visit-l {
			width: 30%;

			.visit-num {
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				margin-bottom: 12rpx;
			}

			.visit-btn {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 33, 45, 1);
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.distance {
			width: 100%;
			padding: 0 12rpx 12rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);

			image {
				width: 18rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		}

		// 浏览咨询统计
		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar {
				width: 40%;
				height: 46rpx;
				position: relative;

				image {
					width: 46rpx;
					height: 46rpx;
					border-radius: 50%;
					position: absolute;
				}
			}

			.visit-l {
				width: 60%;
				height: 46rpx;

				.visit-num {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
				}
			}

		}

	}

	// 区域  筛选
	.dropdown-box {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: -940rpx;
		height: 940rpx;
		background: #fff;
		z-index: 99;
		overflow: hidden;
	}

	/* 新增区域样式 */
	.acea-box {}

	.acea-box .aside {
		position: absolute;
		left: 0;
		top: 0;
		width: 200rpx;
		height: 100%;
		left: 0;
		bottom: 100rpx;
		border-right: 1px solid #f7f7f7;
		border-bottom: 1px solid #f7f7f7;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}

	.acea-box .conter {
		height: calc(100% - 160rpx);
		position: absolute;
		margin: 0rpx 0 0 200rpx;
		padding: 0 14rpx;
		border-bottom: 1px solid #f7f7f7;
	}

	.acea-box .acea-btn {
		width: 100%;
		height: 160rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0 18rpx;
	}

	.acea-box .acea-btn .reset {
		width: 45%;
		height: 100rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 100rpx;
		color: #0000ff;
		background: #F5F6FA;
	}

	.acea-box .acea-btn .confirm {
		width: 45%;
		height: 100rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}

	/* 筛选 */
	.filtrate-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		z-index: 99;
	}

	.filtrate-box .aside {
		padding-top: 24rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 200rpx;
		height: calc(100% - 100rpx);
		left: 0;
		bottom: 100rpx;
		background: #F8F8F8;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}

	.filtrate-box .aside .dropdown-item {
		height: 88rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		margin-bottom: 12rpx;
		max-width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter {
		height: calc(100% - 100rpx);
		position: absolute;
		margin: 0rpx 0 0 200rpx;
		padding: 24rpx 14rpx;
	}

	.filtrate-box .conter .dropdown-item {
		display: inline-block;
		width: 46%;
		background-color: #f6f6f6;
		margin-bottom: 18rpx;
		border-radius: 4rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter .dropdown-item:nth-child(2n) {
		margin-right: 18rpx;
	}

	.filtrate-box .conter .conter-title {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.filtrate-box .conter .dropdown-item.on {
		background: rgba(255, 247, 248, 1);
		color: rgba(238, 33, 45, 1);
	}

	.filtrate-box .filtrate-btn {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.filtrate-box .filtrate-btn .reset {
		width: 35%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #4b4b4b;
		background: #F5F6FA;
	}

	.filtrate-box .filtrate-btn .confirm {
		width: 65%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}

	.dsitem {
		display: inline-block !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		/*文本强制一行显示*/
		overflow: hidden !important;
		/*文本溢出隐藏*/
		text-overflow: ellipsis !important;
	}

	.uicon {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
</style>